<template>
    <div class="conten">
        <div class="conten_search">
            <el-input class="conten_search_input" type="text" :prefix-icon="Search"></el-input>
            <el-button size="large" class="conten_search_button">
                搜索
            </el-button>

            <div class="conten_select">
                <span>发布状态&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <el-select v-model="value" class="m-2" placeholder="全部" size="default">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <div class="conten_picker">
                <span>发布时间&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期" size="default" />
            </div>
        </div>

        <div class="operate">
            <div class="one"><span>内容</span></div>
            <div class="two"><span>发布时间</span></div>
            <div class="three"><span>价格</span></div>
            <div class="four"><span>数据</span></div>
            <div class="five"><span>销售/销售额</span></div>
            <div class="five"><span>状态</span></div>
            <div class="five"><span>操作</span></div>
        </div>
        <div class="conten_data">
            <span>无更多内容</span>
        </div>
    </div>
</template>
  
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'goods_manager',
})
</script>


<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const value = ref('')
const value1 = ref('')

const options = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: '已发布',
        label: '已发布',
    },
    {
        value: '未发布',
        label: '未发布',
    },
    {
        value: '审核中',
        label: '审核中',
    },
    {
        value: '审核未通过',
        label: '审核未通过',
    },
    {
        value: '仅主页可见',
        label: '仅主页可见',
    },
]

</script>

<style scoped lang="less">
.conten {
    .conten_search {
        padding-right: 16px;
        display: flex;

        .conten_search_input {
            background-color: #ccc;
            width: 200px;
            height: 40px;
        }

        .conten_search_button {
            margin-left: 10px;
        }
    }

    .conten_select {
        margin: 0px 16px 0px 30px;
        // margin-left: 30px;
        text-align: center;

        ::v-deep .el-input__wrapper {
            width: 100px;
        }
    }

    .conten_picker {
        ::v-deep .el-date-editor {
            width: 238px;
        }
    }

    .operate {
        display: flex;
        margin-top: 16px;
        background-color: #f2eded;

        .one {
            width: 410px;
            height: 44px;
            line-height: 44px;
            text-align: center;
        }

        .two {
            width: 150px;
            height: 44px;
            line-height: 44px;
            text-align: center;
        }

        .three {
            width: 134px;
            height: 44px;
            line-height: 44px;
            text-align: center;
        }

        .four {
            width: 133px;
            height: 44px;
            line-height: 44px;
            text-align: center;
        }

        .five {
            width: 133px;
            height: 44px;
            line-height: 44px;
            text-align: center;
        }
    }

    .conten_data {
        height: 56px;
        line-height: 56px;
        text-align: center;
        width: 100%;
        color: #ccc;
        font-size: 14px;
    }
}
</style>
  